<template>
  <CardDialog v-model:visible="show" width="800px" title="桥梁配置">
    <div class="table-head">
      <a-button class="card-btn" type="default" style="margin-bottom: 15px" @click="handleCreate">添加桥梁</a-button>
    </div>
    <div class="radar-content">
      <a-table
        class="crud-table"
        :columns="columns"
        :data-source="tableData"
        :pagination="false"
        :loading="loading"
        :scroll="{ x: '100%', y: 'calc(100vh - 310px)' }"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.dataIndex === 'isEnabled'">
            <a-tag :color="record.isEnabled ? 'green' : 'red'">
              {{ record.isEnabled ? '启用' : '禁用' }}
            </a-tag>
          </template>
          <template v-else-if="column.dataIndex === 'operation'">
            <a-button type="text" class="operat-button" @click="handleUpdate(record)">编辑</a-button>
            <a-button type="text" class="operat-button" @click="handleDelete(record)">删除</a-button>
          </template>
        </template>
      </a-table>

      <div class="smart-query-table-page">
        <a-pagination
          showSizeChanger
          showQuickJumper
          show-less-items
          :defaultPageSize="queryForm.size"
          v-model:current="queryForm.current"
          v-model:pageSize="queryForm.size"
          :total="total"
          @change="onload"
          @showSizeChange="onload"
          :show-total="(total) => `共${total}条`"
        />
      </div>
    </div>
    <formDialog ref="formRef" @onload="onload" />
  </CardDialog>
</template>
<script setup>
  import { ref, computed } from 'vue';
  import CardDialog from '/@/components/cardDialog/index.vue';
  import { api } from '/@/api/plat/bridge.js';
  import formDialog from './form.vue';
  import { PageMixin } from '/@/utils/mixin';
  const { deleteFn } = PageMixin();

  let show = ref(false);
  const formRef = ref();
  const columns = [
    {
      title: '名称',
      dataIndex: 'bridgeName',
      width: 120,
    },
    // {
    //   title: '是否启用',
    //   dataIndex: 'isEnabled',
    //   width: 100,
    // },
    {
      title: '纬度',
      dataIndex: 'latitude',
      width: 110,
    },
    {
      title: '经度',
      dataIndex: 'longitude',
      width: 110,
    },
    {
      title: '操作',
      dataIndex: 'operation',
      width: 120,
      fixed: 'right',
    },
  ];
  const tableData = ref([]);
  let loading = ref(false);
  const queryFormState = {
    current: 1,
    size: 10,
  };
  const total = ref(0);
  const queryForm = ref({ ...queryFormState });

  function queryData() {
    queryForm.value.current = 1;
    onload();
  }

  function onload() {
    loading.value = true;
    api.queryPage(queryForm.value).then(({ data }) => {
      tableData.value = data.records;
      total.value = data.total;
      loading.value = false;
    });
  }

  function handleCreate() {
    formRef.value.open();
  }

  function handleUpdate(row) {
    formRef.value.open(row);
  }

  function handleDelete(data) {
    deleteFn(data, api.delete, 'bridgeId').then(() => {
      onload();
    });
  }

  function open() {
    show.value = true;
    queryData();
  }

  defineExpose({
    open,
  });
</script>

<style lang="less" scoped>
  @import './index.less';
  @import '/@/assets/style/table.less';
</style>
